<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>

<body>
    <div style="width: 600px;height:400px;background: #05265C; "></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value

        option = {

            legend: {
                show: true,
                top: "40%",
                left: "75%",
                itemStyle: {
                    color: "#4CF9F5"
                },
                textStyle: {
                    color: "#3A5173"
                },
                formatter: function (name) {
                    let data = [{
                            value: 150,
                            name: "离线设备"
                        },
                        {
                            value: 1030,
                            name: "在线设备"
                        }
                    ]
                    let tarValue = 0;
                    for (let i = 0, l = data.length; i < l; i++) {
                        tarValue = data[i].value;
                    }
                    let arr = [
                        name + tarValue
                    ]
                    return arr.join('')
                },

            },
            graphic: [{
                type: 'text',
                top: '36%',
                left: 'center',
                style: {
                    text: '总设备',
                    fill: '#2A4572',
                    fontSize: 16,
                    fontWeight: 'normal'
                }
            }, {
                type: 'text',
                top: '45%',
                left: 'center',
                style: {
                    text: '1180',
                    fill: 'white',
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            }],
            series: [{
                name: "全网设备统计",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: [
                    "#798FA4",
                    "#65F3F5"
                ],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [{
                        value: 150,
                        name: "离线设备"
                    },
                    {
                        value: 1030,
                        name: "在线设备"
                    }
                ]
            }]
        };
        
        mCharts.setOption(option)
    </script>
</body>

</html>